<template>
  <NModal :show="state.show" @UpdateShow="close">
    <div ref="modalRef" class="list-dia">
      <MacHeader
        :title="state.title"
        :isFullscreen="isFullscreen"
        :showDesc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <div>
          <NForm inline :model="tableInfo.queryForm" label-placement="left">
            <NFormItem label="昵称">
              <NInput
                v-model:value="tableInfo.queryForm.nickname"
                placeholder="请输入昵称"
                clearable
                style="width: 200px"
              />
            </NFormItem>
            <NFormItem label="邮箱">
              <NInput
                v-model:value="tableInfo.queryForm.email"
                placeholder="请输入邮箱"
                clearable
                style="width: 200px"
              />
            </NFormItem>
            <NFormItem>
              <NButton type="primary" @click="queryData">
                <template #icon>
                  <n-icon>
                    <i class="esayIcon esayIcon-sousuo"></i>
                  </n-icon>
                </template>
                <span>搜索</span>
              </NButton>
            </NFormItem>
          </NForm>
        </div>
        <NDataTable
          style="flex: 1"
          flex-height
          :loading="tableInfo.listLoading"
          :columns="columns"
          :data="tableInfo.tableData"
          :pagination="false"
        />
      </div>
    </div>
  </NModal>
  <log-list ref="logRef" />
  <user-detail ref="detailRef" @childer="handChilder" />
  <user-childer ref="childerRef" v-if="isChilder" />
</template>
<script setup lang="ts" name="UserChilder">
import { ref, reactive, h, defineAsyncComponent, nextTick } from 'vue'
import type { Ref } from 'vue'
import {
  DataTableColumns,
  NModal,
  NDataTable,
  NFormItem,
  NButton,
  NForm,
  NIcon,
  NInput,
  NImage
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useFullscreen } from '@vueuse/core'
import { useApi } from '@/hooks/useApi'
import userApi from '@/service/api/operation/user'
const UserDetail = defineAsyncComponent(() => import('./Detail.vue'))
const LogList = defineAsyncComponent(() => import('./LogList.vue'))

/**
 *  递归组件
 * */
const childerRef = ref()
const isChilder = ref(false)
const handChilder = (row: any) => {
  isChilder.value = true
  nextTick(() => {
    childerRef.value.open(row)
  })
}
/**
 *  按钮
 * */
const detailRef = ref()
const handUser = (row: any) => {
  detailRef.value.open(row.id)
}

const logRef = ref()
const handLog = (row: any) => {
  logRef.value.open(row)
}
/**
 *  列表
 * */
const addRef: Ref<any> = ref()
const delRef: Ref<any> = ref()
const { tableInfo, queryData } = useApi({
  isPaging: false,
  isRequest: false,
  addRef,
  delRef,
  getData: userApi.childer,
  initForm: {
    user_id: null
  }
})

const columns: DataTableColumns<any> = [
  {
    title: '头像',
    key: 'avatar',
    align: 'center',
    render(row: any) {
      return h(NImage, {
        src: row.avatar,
        width: '50'
      })
    }
  },
  {
    title: '昵称',
    key: 'nickname'
  },
  {
    title: '邮箱',
    key: 'email'
  },
  {
    title: '积分',
    key: 'integral'
  },
  {
    title: '签到天数',
    key: 'signDay'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 200,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            quaternary: true,
            onClick: () => handUser(row)
          },
          { default: () => '详情' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handLog(row)
          },
          { default: () => '积分' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handChilder(row)
          },
          { default: () => '下级' }
        )
      ])
    }
  }
]

const state = reactive({
  show: false,
  title: ''
})
const modalRef: Ref<any> = ref()
const {
  isFullscreen,
  toggle
}: { isFullscreen: Ref<boolean>; toggle: () => Promise<void> } =
  useFullscreen(modalRef)
const close = () => {
  state.show = false
}
const open = (row: any): void => {
  state.title = `${row.nickname}[下级列表]`
  tableInfo.queryForm.user_id = row.id
  tableInfo.queryForm.email = ''
  tableInfo.queryForm.nickname = ''
  queryData()
  state.show = true
}

defineExpose({
  open
})
</script>
<style scoped lang="scss">
.list-dia {
  width: 1000px;
  height: 80vh;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  .content {
    margin-top: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .add-text {
    margin-left: 10px;
  }
  .pb20 {
    padding-bottom: 20px;
  }
  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
